<template>
    <div class="fenbu">
        <ModalTitle title="执法事件类型分布TOP10">
            <TimeTab @timeReturnFn="timeReturnFn" />
        </ModalTitle>
        <div class="fenbu-chart" id="fenbu-chart" ref="fenbuChart"></div>
    </div>
</template>

<script>
import TimeTab from '@/components/TimeTab/Index.vue'
import ModalTitle from '@/components/ModalTitle/Index.vue'
import { ZongHeZhiFaZhuanTi } from '@/api/zhangzi'

export default {
    components: {
        TimeTab,
        ModalTitle
    },

    data() {
        return {
            timeType: 0
        }
    },

    mounted() {
        this.fenbuDataFn()
    },

    methods: {
        timeReturnFn(e) {
            this.timeType = e.value
            this.fenbuDataFn('change')
        },

        fenbuDataFn(T = 'init') {
            ZongHeZhiFaZhuanTi.eventTypeDistribution({
                dateType: this.timeType
            }).then(res => {
                if (res.code == 200) {
                    let D = res.data.map(e => { return { value: e.orderNumber, name: e.type } })
                    if (T == 'init') {
                        this.fenbuChartFn(D)
                    } else {
                        var chart = echarts.getInstanceByDom(this.$refs.fenbuChart)
                        var option = chart.getOption()
                        option.series[0].data = D
                        chart.setOption(option)
                    }
                }
            })
        },

        fenbuChartFn(data) {
            let charts = echarts.init(this.$refs.fenbuChart)
            let option = {
                toolbox: {
                    show: false,
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {d}',
                    backgroundColor: 'rgba(47,37,198,0.75)',
                    borderColor: '#2880FF',
                    borderWidth: 1,
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: ['10%', '95%'],
                        center: ['50%', '55%'],
                        roseType: 'area',
                        label: {
                            normal: {
                                formatter: params => {
                                    return (
                                        '{name|' + params.name + '}\n{value|' +
                                        params.value + '}'
                                    );
                                },
                                // padding: [0 , -100, 25, -100],
                                rich: {
                                    name: {
                                        fontSize: 12,
                                        padding: [0, 0, 10, 0],
                                        color: '#fff'
                                    },
                                    value: {
                                        fontSize: 14,
                                        fontWeight: 'bolder',
                                        padding: [10, 0, 0, 0],
                                        margin: [10, 0, 0, 0],
                                        color: 'inherit'
                                        // color: '#333333'
                                    }
                                }
                            }
                        },
                        labelLine: {
                            length: 5,
                            length2: 10,
                        },
                        selectedOffset: 30,
                        selectedMode: true,
                        itemStyle: {
                            borderRadius: 8
                        },
                        data
                    }
                ]
            };
            option && charts.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.fenbu {
    width: 100%;
    height: 23.4rem;

    .fenbu-chart {
        width: 100%;
        height: 14.5rem;
        margin-top: 1rem;
    }
}
</style>